<script setup>
import { reactive, ref, onMounted } from "vue";
import { getAllSend, setSendStatus } from "~/api";
import { useRouter } from "vue-router";
import { ElMessage, ElMessageBox } from "element-plus";
const formData = reactive({
    pageNum: 0,
    pageSize: 20,
    orderType: 1,
    address: "",
    team: 0,
    total: 0,
});
const loading = ref(false);
const list = ref([]);
const Sum = ref({});
const onSubmit = async () => {
    loading.value = true;
    try {
        const res = await getAllSend(formData);
        list.value = res.data.data.SendList;
        formData.total = res.data.data.Total;
        Sum.value = res.data.data;
    } catch (error) {}
    loading.value = false;
};
const handleSizeChange = (val) => {
    formData.pageSize = val;
    formData.pageNum = 0;
    onSubmit();
};
const handleCurrentChange = (val) => {
    formData.pageNum = val - 1;
    onSubmit();
};
const clickMultiUpdatePaymentPhone = ({ Id }) => {
    ElMessageBox.confirm("通过操作，是否继续？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        beforeClose: async (action, instance, done) => {
            if (action === "confirm") {
                try {
                    instance.confirmButtonLoading = true;
                    instance.confirmButtonText = "执行中...";
                    await setSendStatus({
                        id: Id,
                        status: 1,
                    });
                    done();
                    instance.confirmButtonLoading = false;
                } catch (error) {
                    instance.confirmButtonLoading = false;
                    instance.confirmButtonText = "确认";
                    ElMessage.error(error);
                }
            } else {
                done();
            }
        },
    })
        .then(() => {
            ElMessage.success("成功");
            onSubmit();
        })
        .catch(() => {});
};
const clickMultiUpdatePaymentPhone2 = ({ Id }) => {
    ElMessageBox.confirm("驳回操作，是否继续？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        beforeClose: async (action, instance, done) => {
            if (action === "confirm") {
                try {
                    instance.confirmButtonLoading = true;
                    instance.confirmButtonText = "执行中...";
                    await setSendStatus({
                        id: Id,
                        status: 5,
                    });
                    done();
                    instance.confirmButtonLoading = false;
                } catch (error) {
                    instance.confirmButtonLoading = false;
                    instance.confirmButtonText = "确认";
                    ElMessage.error(error);
                }
            } else {
                done();
            }
        },
    })
        .then(() => {
            ElMessage.success("成功");
            onSubmit();
        })
        .catch(() => {});
};
onMounted(() => {
    onSubmit();
});
</script>
<template>
    <div>
        <el-form ref="form" :model="formData" label-width="80px" :inline="true">
            <el-form-item label="排序">
                <el-select v-model="formData.orderType" placeholder="请选择" @change="onSubmit">
                    <el-option label="顺序" :value="0"> </el-option>
                    <el-option label="倒序" :value="1"> </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="类型">
                <el-select v-model="formData.team" placeholder="请选择" @change="onSubmit">
                    <el-option label="个人" :value="0"> </el-option>
                    <el-option label="团队" :value="1"> </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="地址">
                <el-input v-model="formData.address" placeholder="请输入地址" style="width: 360px"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">搜索</el-button>
            </el-form-item>
        </el-form>
        <div class="total">总数 <span>{{ Sum.SumSendAmount }} </span></div>
        <el-table ref="multipleTable" :data="list" v-loading="loading">
            <el-table-column prop="Id" width="80" label="#"> </el-table-column>
            <el-table-column prop="AdminId" width="80" label="所属团队"> </el-table-column>
            <el-table-column prop="UserId" width="70" label="用户ID"> </el-table-column>
            <el-table-column prop="Address" label="用户地址" width="250">
            </el-table-column>
            <el-table-column prop="FromAddress" label="发送地址" width="250">
            </el-table-column>
            <el-table-column prop="ToAddress" label="到账地址" width="250">
            </el-table-column>
            <el-table-column prop="Fee" label="币种" width="100">
                <template #default="scope">
                    <p :style="{
            color:
            scope.row.Contract.toLowerCase() == '0xC7Ae572AfD19a3546B8c75cc6107f7885b5c044E'.toLowerCase() ?'#67c23a':'#c45656' }">
                        {{scope.row.Contract.toLowerCase() == '0xC7Ae572AfD19a3546B8c75cc6107f7885b5c044E'.toLowerCase() ?'HF':'USDT'}}
                    </p>
                </template>
            </el-table-column>
            <el-table-column prop="Amount" label="数量" width="100">
            </el-table-column>
            <el-table-column prop="Fee" label="手续费" width="100"> </el-table-column>
            <el-table-column prop="Fee" label="状态" width="100">
                <template #default="scope">
                    <p :style='{
            color:
                [" #409eff", "#67c23a", "#e6a23c", "#c45656", "#67c23a", "#c45656"][scope.row.Status]
        }'>
                        {{ ["待处理", "提币中", "提币中", "提币失败", "提币成功", "已驳回提币"][scope.row.Status] }}
                    </p>
                </template>
            </el-table-column>
            <el-table-column prop="TxHash" label="交易哈希" width="290">
                <template #default="scope">
                    <a v-if="scope.row.Contract == '0x55d398326f99059fF775485246999027B3197955' || scope.row.Contract == '0xC7Ae572AfD19a3546B8c75cc6107f7885b5c044E'" :href="'https://bscscan.com/tx/' + scope.row.TxHash" target="_blank" rel="noopener noreferrer">
                        {{ scope.row.TxHash }}</a>
                    <a :href="'https://tronscan.org/#/transaction/' + scope.row.TxHash?.slice(2)" target="_blank" v-else>
                        {{ scope.row.TxHash?.slice(2) }}
                    </a>
                </template>
            </el-table-column>
            <el-table-column prop="CreatedAt" label="创建时间" min-width="160">
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="160">
                <template #default="scope">
                    <el-button type="primary" size="small" :disabled="[0, 3].indexOf(scope.row.Status) == -1" @click="clickMultiUpdatePaymentPhone(scope.row)">通过</el-button>
                    <el-button type="danger" size="small" :disabled="[0, 3].indexOf(scope.row.Status) == -1" @click="clickMultiUpdatePaymentPhone2(scope.row)">驳回</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination background layout="total, sizes, prev, pager, next, jumper" :page-size="formData.pageSize" :total="formData.total" @size-change="handleSizeChange" @current-change="handleCurrentChange">
        </el-pagination>
    </div>
    <send ref="sendRefs" />
</template>
<style lang="scss" scoped>
.el-pagination {
    padding: 15px;
    float: right;
}

.total {
    padding: 10px 0;
    font-size: 16px;

    span {
        margin-right: 15px;
        color: rgb(245, 108, 108);
    }
}

a {
    color: #1989fa;
}
</style>